{% extends "dashboard/base.html" %}
{% load i18n %}
{% load materializecss %}
{% load staticfiles %}

{% block title %}
  {% if voucher.pk %}
    {{ voucher }}
  {% else %}
    {% trans "Add new voucher" context "Voucher page title" %}
  {% endif %}
   - {% trans "Vouchers" context "Dashboard vouchers list" %} - {{ block.super }}
{% endblock %}

{% block body_class %}body-vouchers{% endblock %}

{% block menu_vouchers_class %}active{% endblock %}

{% block header_menu %}
  {% url "dashboard:voucher-list" as url %}
  {% include "dashboard/includes/_back-link.html" with url=url %}
{% endblock %}

{% block header_extra %}
  {% if voucher.pk %}
    <a class="dropdown-button right" href="#" data-activates="voucher-delete"
    data-constrainwidth="false">
      <svg data-src="{% static "dashboard/images/more_vert.svg" %}" height="24" width="24" />
    </a>
    <ul id="voucher-delete" class="dropdown-content">
      <li>
        <a class="modal-trigger-custom" href="#base-modal" data-href="{% url 'dashboard:voucher-delete' pk=voucher.pk %}">
          {% trans "Remove voucher" context "Voucher action" %}
        </a>
      </li>
    </ul>
  {% endif %}
{% endblock %}

{% block breadcrumbs %}
  <ul class="breadcrumbs breadcrumbs--history">
    <li>
      <a href="{% url 'dashboard:voucher-list' %}">
        {% trans "Vouchers" context "Dashboard vouchers list" %}
      </a>
    </li>
    <li class="back-mobile">
      <a href="{% url 'dashboard:voucher-list' %}">
        <svg data-src="{% static "dashboard/images/arrow_left.svg" %}" fill="#fff" width="20px" height="20px" />
      </a>
    </li>
    <li>
      <span class="breadcrumbs--ellipsed-item">
        {% if voucher.pk %}
          {{ voucher }}
        {% else %}
          {% trans "Add new voucher" context "Voucher breadcrumbs" %}
        {% endif %}
      </span>
    </li>
  </ul>
{% endblock %}

{% block menu_discounts_class %} active{% endblock %}

{% block content %}
  <div class="row">
    <div class="col m12 l9">
      <div class="card">
        <form method="post" enctype="multipart/form-data" id="form-vouchers" novalidate>
          <div class="card-content card-content-form">
            {% csrf_token %}
            {% if form.non_field_errors %}
              <blockquote>
                {% for non_field_error in form.non_field_errors %}
                  {{ non_field_error }}
                {% endfor %}
              </blockquote>
            {% endif %}
            <div class="row">
              <div class="col s12 m8">
                <div class="row">
                  {{ form.code|materializecss }}
                </div>
                <div class="row">
                  {{ form.name|materializecss }}
                </div>
                <div class="row">
                  <div class="col s12 m8">
                    <div class="row">
                      {{ form.discount_value|materializecss }}
                    </div>
                  </div>
                  <div class="col s12 m4">
                    <div class="row">
                      {{ form.discount_value_type|materializecss:"input-field s12" }}
                    </div>
                  </div>
                </div>
                <div class="row">
                  {{ form.type|materializecss:"input-field s12" }}
                </div>
                {% for form_type, form in type_base_forms.items %}
                  <div class="row voucher-form" data-type="{{ form_type }}">
                    {% for field in form %}
                      {{ field|materializecss:"input-field s12" }}
                    {% endfor %}
                  </div>
                {% endfor %}
              </div>
              <div class="col s12 m4">
                <div class="row">
                  {{ form.start_date|materializecss:"input-field s12" }}
                </div>
                <div class="row">
                  {{ form.end_date|materializecss:"input-field s12" }}
                </div>
                <div class="row">
                  {{ form.usage_limit|materializecss }}
                </div>
              </div>
            </div>
          </div>
          <div class="card-action right-align">
            {% if voucher.pk %}
              <a href="{% url 'dashboard:voucher-list' %}" class="btn btn-flat">
                {% trans "Cancel" context "Dashboard cancel action" %}
              </a>
              <button type="submit" class="btn waves-effect waves-light">
                {% trans "Update" context "Dashboard update action" %}
              </button>
            {% else %}
              <a href="{% url 'dashboard:voucher-list' %}" class="btn btn-flat">
                {% trans "Cancel" context "Dashboard cancel action" %}
              </a>
              <button type="submit" class="btn waves-effect waves-light">
                {% trans "Create" context "Dashboard create action" %}
              </button>
            {% endif %}
          </div>
        </form>
      </div>
    </div>
    <div class="col m12 l3 help-box"></div>
  </div>
{% endblock %}
